<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查聊 - 轻量级论坛</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5', // 主色调：紫色
            secondary: '#10B981', // 辅助色：绿色
            accent: '#F59E0B', // 强调色：橙色
            light: '#F3F4F6', // 浅色背景
            dark: '#1F2937', // 深色文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
    }
  </style>
  
  <style>
    /* 基础样式 */
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body class="bg-gray-50 text-gray-800">
  <!-- PC端导航栏 -->
  <header class="hidden md:block fixed top-0 left-0 right-0 bg-white shadow-sm z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <a href="index.html" class="flex items-center space-x-2">
        <span class="text-primary text-2xl"><i class="fa fa-comments-o"></i></span>
        <span class="text-xl font-bold text-primary">查聊</span>
      </a>
      
      <!-- 搜索框 -->
      <div class="relative flex-1 max-w-xl mx-8">
        <input type="text" placeholder="搜索帖子、话题或用户..." 
               class="w-full pl-10 pr-4 py-2 rounded-full bg-light border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
        <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
          <i class="fa fa-search"></i>
        </span>
      </div>
      
      <!-- 导航链接 -->
      <nav class="flex items-center space-x-6">
        <a href="index.html" class="text-primary font-medium">首页</a>
        <a href="#" class="text-gray-600 hover:text-primary transition-colors">发现</a>
        <a href="new-post.html" class="px-4 py-2 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors flex items-center space-x-1">
          <i class="fa fa-pencil"></i>
          <span>发帖</span>
        </a>
        <a href="profile.html" class="relative">
          <img src="https://picsum.photos/seed/user1/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm">
        </a>
      </nav>
    </div>
  </header>

  <!-- 移动端顶部导航 -->
  <header class="md:hidden fixed top-0 left-0 right-0 bg-white shadow-sm z-30">
    <div class="flex items-center justify-between p-4">
      <a href="index.html" class="flex items-center space-x-2">
        <span class="text-primary text-2xl"><i class="fa fa-comments-o"></i></span>
        <span class="text-xl font-bold text-primary">查聊</span>
      </a>
      <div class="flex items-center space-x-4">
        <button class="text-gray-600">
          <i class="fa fa-search text-lg"></i>
        </button>
        <a href="profile.html" class="relative">
          <img src="https://picsum.photos/seed/user1/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
        </a>
      </div>
    </div>
  </header>

  <!-- 移动端搜索框 (默认隐藏) -->
  <div id="mobile-search" class="hidden md:hidden fixed top-14 left-0 right-0 bg-white p-3 shadow-md z-20">
    <div class="relative">
      <input type="text" placeholder="搜索帖子、话题或用户..." 
             class="w-full pl-10 pr-4 py-2 rounded-full bg-light border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
      <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
        <i class="fa fa-search"></i>
      </span>
    </div>
  </div>

  <!-- 主要内容区域 -->
  <main class="container mx-auto px-4 pt-24 pb-20 md:pt-28">
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- 左侧边栏 (PC端) -->
      <aside class="hidden lg:block w-64 shrink-0">
        <div class="bg-white rounded-xl shadow-sm p-5 sticky top-24">
          <!-- 用户信息 -->
          <div class="flex items-center space-x-3 mb-6">
            <img src="https://picsum.photos/seed/user1/60/60" alt="用户头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary/20">
            <div>
              <h3 class="font-semibold text-gray-900">张三</h3>
              <p class="text-sm text-gray-500">@zhangsan</p>
            </div>
          </div>
          
          <!-- 导航菜单 -->
          <nav class="space-y-1">
            <a href="index.html" class="flex items-center space-x-3 p-3 rounded-lg bg-primary/10 text-primary font-medium">
              <i class="fa fa-home w-5 text-center"></i>
              <span>首页</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-compass w-5 text-center"></i>
              <span>发现</span>
            </a>
            <a href="favorites.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-star-o w-5 text-center"></i>
              <span>我的收藏</span>
              <span class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">5</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-bell-o w-5 text-center"></i>
              <span>通知</span>
              <span class="ml-auto bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full">3</span>
            </a>
            <a href="profile.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-user-o w-5 text-center"></i>
              <span>个人中心</span>
            </a>
          </nav>
          
          <!-- 分割线 -->
          <div class="my-5 border-t border-gray-100"></div>
          
          <!-- 热门话题 -->
          <h4 class="font-semibold text-gray-700 mb-3">热门话题</h4>
          <div class="space-y-3">
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #前端开发
            </a>
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #人工智能
            </a>
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #生活方式
            </a>
            <a href="#" class="block text-sm text-gray-600 hover:text-primary transition-colors">
              #职场经验
            </a>
          </div>
        </div>
      </aside>

      <!-- 中间内容区 -->
      <div class="flex-1">
        <!-- 顶部筛选栏 -->
        <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
          <div class="flex items-center justify-between flex-wrap gap-3">
            <div class="flex space-x-1">
              <button class="px-4 py-2 rounded-lg bg-primary text-white text-sm font-medium">最新</button>
              <button class="px-4 py-2 rounded-lg text-gray-600 text-sm hover:bg-gray-50 transition-colors">热门</button>
              <button class="px-4 py-2 rounded-lg text-gray-600 text-sm hover:bg-gray-50 transition-colors">关注</button>
            </div>
            <div class="flex items-center space-x-2">
              <button class="p-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
                <i class="fa fa-sliders"></i>
              </button>
              <select class="px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                <option>所有分类</option>
                <option>技术讨论</option>
                <option>生活分享</option>
                <option>问答求助</option>
                <option>资源分享</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 帖子列表 -->
        <div class="space-y-4">
          <!-- 帖子卡片 1 -->
          <article class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
            <!-- 帖子头部 -->
            <div class="p-4 flex items-center justify-between">
              <div class="flex items-center space-x-3">
                <img src="https://picsum.photos/seed/user2/50/50" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                <div>
                  <h3 class="font-medium text-gray-900">李四</h3>
                  <p class="text-xs text-gray-500">2小时前 · 技术讨论</p>
                </div>
              </div>
              <button class="text-gray-400 hover:text-gray-600">
                <i class="fa fa-ellipsis-h"></i>
              </button>
            </div>
            
            <!-- 帖子内容 -->
            <div class="px-4 pb-4">
              <h2 class="text-lg font-semibold mb-2 text-gray-900 hover:text-primary transition-colors">
                <a href="post-detail.html">Tailwind CSS v3 新特性全面解析</a>
              </h2>
              <p class="text-gray-600 mb-3 line-clamp-2">
                Tailwind CSS v3带来了许多令人兴奋的新特性，包括JIT编译模式、原生字体大小调整、颜色不透明度工具类等。本文将深入探讨这些新特性，并提供实用的代码示例，帮助你更好地利用Tailwind CSS提升开发效率。
              </p>
              
              <!-- 帖子图片 -->
              <div class="rounded-lg overflow-hidden mb-4">
                <img src="https://picsum.photos/seed/tailwind/800/400" alt="帖子图片" class="w-full h-auto object-cover">
              </div>
              
              <!-- 互动区域 -->
              <div class="flex items-center justify-between text-gray-500 text-sm">
                <div class="flex items-center space-x-4">
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-heart-o"></i>
                    <span>128</span>
                  </button>
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-comment-o"></i>
                    <span>42</span>
                  </button>
                </div>
                <div class="flex items-center space-x-4">
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-bookmark-o"></i>
                  </button>
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-share-alt"></i>
                  </button>
                </div>
              </div>
            </div>
          </article>

          <!-- 帖子卡片 2 -->
          <article class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
            <!-- 帖子头部 -->
            <div class="p-4 flex items-center justify-between">
              <div class="flex items-center space-x-3">
                <img src="https://picsum.photos/seed/user3/50/50" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                <div>
                  <h3 class="font-medium text-gray-900">王五</h3>
                  <p class="text-xs text-gray-500">5小时前 · 生活分享</p>
                </div>
              </div>
              <button class="text-gray-400 hover:text-gray-600">
                <i class="fa fa-ellipsis-h"></i>
              </button>
            </div>
            
            <!-- 帖子内容 -->
            <div class="px-4 pb-4">
              <h2 class="text-lg font-semibold mb-2 text-gray-900 hover:text-primary transition-colors">
                <a href="post-detail.html">我用三个月时间学习前端开发的心得体会</a>
              </h2>
              <p class="text-gray-600 mb-3 line-clamp-2">
                作为一名零基础的学习者，我在三个月内从HTML、CSS和JavaScript的基础开始，逐步掌握了前端开发的核心技能。这篇文章分享了我的学习方法、遇到的挑战以及如何克服它们的经验，希望能对正在学习前端的朋友有所帮助。
              </p>
              
              <!-- 帖子图片 -->
              <div class="grid grid-cols-2 gap-2 rounded-lg overflow-hidden mb-4">
                <img src="https://picsum.photos/seed/study1/400/300" alt="学习照片1" class="w-full h-36 object-cover">
                <img src="https://picsum.photos/seed/study2/400/300" alt="学习照片2" class="w-full h-36 object-cover">
              </div>
              
              <!-- 互动区域 -->
              <div class="flex items-center justify-between text-gray-500 text-sm">
                <div class="flex items-center space-x-4">
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-heart-o"></i>
                    <span>256</span>
                  </button>
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-comment-o"></i>
                    <span>89</span>
                  </button>
                </div>
                <div class="flex items-center space-x-4">
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-bookmark-o"></i>
                  </button>
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-share-alt"></i>
                  </button>
                </div>
              </div>
            </div>
          </article>

          <!-- 帖子卡片 3 -->
          <article class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
            <!-- 帖子头部 -->
            <div class="p-4 flex items-center justify-between">
              <div class="flex items-center space-x-3">
                <img src="https://picsum.photos/seed/user4/50/50" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                <div>
                  <h3 class="font-medium text-gray-900">赵六</h3>
                  <p class="text-xs text-gray-500">昨天 · 问答求助</p>
                </div>
              </div>
              <button class="text-gray-400 hover:text-gray-600">
                <i class="fa fa-ellipsis-h"></i>
              </button>
            </div>
            
            <!-- 帖子内容 -->
            <div class="px-4 pb-4">
              <h2 class="text-lg font-semibold mb-2 text-gray-900 hover:text-primary transition-colors">
                <a href="post-detail.html">如何优化大型React应用的性能？</a>
              </h2>
              <p class="text-gray-600 mb-3 line-clamp-2">
                我们团队正在开发一个大型React应用，随着功能的增加，应用的性能逐渐下降，特别是在低配置设备上。请问有哪些实用的优化技巧可以显著提升React应用的性能？已经尝试过组件懒加载，但效果不明显。
              </p>
              
              <!-- 互动区域 -->
              <div class="flex items-center justify-between text-gray-500 text-sm">
                <div class="flex items-center space-x-4">
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-heart-o"></i>
                    <span>78</span>
                  </button>
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-comment-o"></i>
                    <span>64</span>
                  </button>
                </div>
                <div class="flex items-center space-x-4">
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-bookmark-o"></i>
                  </button>
                  <button class="flex items-center space-x-1 hover:text-primary transition-colors">
                    <i class="fa fa-share-alt"></i>
                  </button>
                </div>
              </div>
            </div>
          </article>

          <!-- 加载更多 -->
          <div class="text-center py-6">
            <button class="px-6 py-2 border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              加载更多
            </button>
          </div>
        </div>
      </div>

      <!-- 右侧边栏 (PC端) -->
      <aside class="hidden lg:block w-72 shrink-0">
        <!-- 今日热门 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <h3 class="font-semibold text-gray-900 mb-4 flex items-center">
            <i class="fa fa-fire text-accent mr-2"></i>
            今日热门
          </h3>
          <div class="space-y-4">
            <a href="post-detail.html" class="block group">
              <h4 class="text-sm font-medium text-gray-800 group-hover:text-primary transition-colors line-clamp-2">
                2023年前端开发必备工具推荐
              </h4>
              <p class="text-xs text-gray-500 mt-1">
                328次浏览 · 56条评论
              </p>
            </a>
            <a href="post-detail.html" class="block group">
              <h4 class="text-sm font-medium text-gray-800 group-hover:text-primary transition-colors line-clamp-2">
                JavaScript异步编程完全指南
              </h4>
              <p class="text-xs text-gray-500 mt-1">
                296次浏览 · 42条评论
              </p>
            </a>
            <a href="post-detail.html" class="block group">
              <h4 class="text-sm font-medium text-gray-800 group-hover:text-primary transition-colors line-clamp-2">
                CSS Grid布局实战技巧分享
              </h4>
              <p class="text-xs text-gray-500 mt-1">
                251次浏览 · 35条评论
              </p>
            </a>
          </div>
        </div>
        
        <!-- 活跃用户 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <h3 class="font-semibold text-gray-900 mb-4">活跃用户</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-3">
                <img src="https://picsum.photos/seed/user5/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                <span class="text-sm font-medium text-gray-800">陈七</span>
              </div>
              <button class="text-xs text-primary border border-primary rounded-full px-3 py-1 hover:bg-primary/5 transition-colors">
                关注
              </button>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-3">
                <img src="https://picsum.photos/seed/user6/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                <span class="text-sm font-medium text-gray-800">杨八</span>
              </div>
              <button class="text-xs text-primary border border-primary rounded-full px-3 py-1 hover:bg-primary/5 transition-colors">
                关注
              </button>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-3">
                <img src="https://picsum.photos/seed/user7/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                <span class="text-sm font-medium text-gray-800">吴九</span>
              </div>
              <button class="text-xs text-gray-400 border border-gray-200 rounded-full px-3 py-1">
                已关注
              </button>
            </div>
          </div>
        </div>
        
        <!-- 广告横幅 -->
        <div class="bg-gradient-to-r from-primary to-purple-600 rounded-xl shadow-sm p-5 text-white">
          <h3 class="font-bold text-lg mb-2">加入查聊VIP</h3>
          <p class="text-sm text-white/80 mb-4">获取专属标识、无广告体验、优先客服等特权</p>
          <button class="w-full py-2 bg-white text-primary font-medium rounded-lg hover:bg-opacity-90 transition-colors">
            立即开通
          </button>
        </div>
      </aside>
    </div>
  </main>

  <!-- 移动端底部导航栏 -->
  <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 md:hidden z-30">
    <div class="flex items-center justify-around h-16">
      <a href="index.html" class="flex flex-col items-center justify-center text-primary">
        <i class="fa fa-home text-xl"></i>
        <span class="text-xs mt-1">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-compass text-xl"></i>
        <span class="text-xs mt-1">发现</span>
      </a>
      <a href="new-post.html" class="flex flex-col items-center justify-center">
        <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center -mt-4 shadow-lg">
          <i class="fa fa-plus text-white text-xl"></i>
        </div>
      </a>
      <a href="favorites.html" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-star-o text-xl"></i>
        <span class="text-xs mt-1">收藏</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-user-o text-xl"></i>
        <span class="text-xs mt-1">我的</span>
      </a>
    </div>
  </nav>

  <!-- 移动端悬浮发布按钮 (在特定条件下显示) -->
  <div class="fixed bottom-20 right-4 md:hidden z-20 hidden" id="floating-new-post">
    <a href="new-post.html" class="w-14 h-14 bg-primary rounded-full flex items-center justify-center shadow-lg">
      <i class="fa fa-pencil text-white text-xl"></i>
    </a>
  </div>

  <!-- JavaScript -->
  <script>
    // 移动端搜索框切换
    const searchButton = document.querySelector('header.md\:hidden button:nth-child(1)');
    const mobileSearch = document.getElementById('mobile-search');
    
    if (searchButton && mobileSearch) {
      searchButton.addEventListener('click', () => {
        mobileSearch.classList.toggle('hidden');
      });
    }
    
    // 监听滚动显示/隐藏底部导航栏
    let lastScrollTop = 0;
    const mobileNav = document.querySelector('nav.fixed.bottom-0');
    const floatingButton = document.getElementById('floating-new-post');
    
    if (mobileNav) {
      window.addEventListener('scroll', () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > lastScrollTop && scrollTop > 300) {
          // 向下滚动且超过300px
          mobileNav.classList.add('translate-y-full');
          if (floatingButton) {
            floatingButton.classList.remove('hidden');
          }
        } else {
          // 向上滚动或未超过300px
          mobileNav.classList.remove('translate-y-full');
          if (floatingButton) {
            floatingButton.classList.add('hidden');
          }
        }
        
        lastScrollTop = scrollTop;
      });
    }
  </script>
</body>
</html>